<template>
  <scroll-view class="flex-col page mine" scroll-y @scroll="onPageScroll">
    <view class="flex-col section" :style="{ paddingTop: navHeight + 'px' }">
      <xlm-top-nav :scrollTop="scrollTop" title="个人定制" />

      <!-- 内容区域 -->
      <view class="content-area">
        <!-- 证书列表 -->
        <view class="certificate-list">
          <!-- <view
            v-for="(certificate, index) in certificates"
            :key="index"
            class="certificate-item"
            :class="{ selected: isCertificateSelected(certificate) }"
            @click="selectCertificate(certificate)"
          > -->
          <view
            v-for="(certificate, index) in certificates"
            :key="index"
            class="certificate-item"
            @click="selectCertificate(certificate)"
          >
            <view class="certificate-info">
              <view class="certificate-name">{{ certificate.certificate_name }}</view>
              <view class="application-time">
                申请时间: {{ formatTime(certificate.createtime) }}
              </view>
            </view>
            <view class="certificate-value">{{ certificate.order_price }}</view>
          </view>
        </view>

        <!-- 空状态 -->
        <view v-if="certificates.length === 0" class="empty-state">
          <image class="empty-icon" :src="imgUrl + 'empty-icon.png'" />
          <text class="empty-text">暂无证书数据</text>
        </view>
      </view>

      <!-- 底部打印按钮 -->
      <!-- <view class="bottom-action">
        <button
          class="print-btn"
          :disabled="selectedCertificates.length === 0"
          @click="printCertificates"
        >
          打印证书
        </button>
      </view> -->
      <view class="bottom-action">
        <button class="print-btn" @click="printCertificates"> 打印证书 </button>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
  import { ref, computed, onMounted } from 'vue'
  import { useOutsideAppStore } from '@/store/app'
  import { imgUrl } from '@/utils/config'
  import { useRequest } from '@/api'
  import { onLoad } from '@dcloudio/uni-app'

  // API接口
  const { API_PERSONAL_CUSTOM_GET } = useRequest()

  // 使用store获取导航高度
  const appStore = useOutsideAppStore()
  const navHeight = computed(() => appStore.navHeight)
  const scrollTop = ref(0)

  // 响应式数据
  const certificates = ref([])
  const selectedCertificates = ref([])
  const isLoading = ref(false)

  // 获取证书列表
  const getCertificates = async () => {
    try {
      isLoading.value = true
      const params = {
        page: 1,
        page_size: 10
      }
      // 实际项目中调用真实API
      const res = await API_PERSONAL_CUSTOM_GET(params)
      if (res && res.code === 1) {
        certificates.value = res.data.data || []
      }
    } catch (error) {
      console.error('获取证书列表失败:', error)
      uni.showToast({
        title: '获取数据失败',
        icon: 'none'
      })
    } finally {
      isLoading.value = false
    }
  }

  // 检查证书是否被选中
  const isCertificateSelected = (certificate) => {
    return selectedCertificates.value.some((item) => item.id === certificate.id)
  }

  // 选择证书
  const selectCertificate = (certificate) => {
    // const index = selectedCertificates.value.findIndex((item) => item.id === certificate.id)
    // if (index > -1) {
    //   selectedCertificates.value.splice(index, 1)
    //   uni.showToast({
    //     title: '已取消选择',
    //     icon: 'none'
    //   })
    // } else {
    //   selectedCertificates.value.push(certificate)
    //   uni.showToast({
    //     title: '已选择证书',
    //     icon: 'success'
    //   })
    // }
  }

  // 打印证书
  const printCertificates = () => {
    uni.navigateTo({
      url: '/pages/mine/printCertificate'
    })
  }

  // 格式化时间戳
  const formatTime = (timestamp) => {
    if (!timestamp) return '暂无时间'

    // 如果是字符串，转换为数字
    const time = typeof timestamp === 'string' ? parseInt(timestamp) : timestamp

    // 检查是否是有效的时间戳（10位或13位）
    if (time.toString().length === 10) {
      // 10位时间戳（秒）
      const date = new Date(time * 1000)
      return date
        .toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false
        })
        .replace(/\//g, '.')
    } else if (time.toString().length === 13) {
      // 13位时间戳（毫秒）
      const date = new Date(time)
      return date
        .toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false
        })
        .replace(/\//g, '.')
    } else {
      return '时间格式错误'
    }
  }

  // 页面滚动处理
  const onPageScroll = (e) => {
    scrollTop.value = e.detail.scrollTop
  }

  // 页面加载
  onLoad(() => {
    getCertificates()
  })

  // 页面显示
  onMounted(() => {
    // 页面初始化逻辑
  })
</script>

<style lang="scss" scoped>
  .personal-custom-page {
    min-height: 100vh;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
  }

  .content-area {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
  }

  .certificate-list {
    .certificate-item {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      border: 2px solid transparent;
      transition: all 0.3s ease;

      &:active {
        transform: scale(0.98);
      }

      &.selected {
        border-color: #213165;
        background: #f8f9ff;
      }

      .certificate-info {
        flex: 1;

        .certificate-name {
          font-size: 16px;
          font-weight: 600;
          color: #333;
          margin-bottom: 8px;
        }

        .application-time {
          font-size: 14px;
          color: #666;
        }
      }

      .certificate-value {
        font-size: 18px;
        font-weight: 600;
        color: #213165;
        padding: 8px 16px;
        background: #f0f4ff;
        border-radius: 20px;
      }
    }
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0;

    .empty-icon {
      width: 80px;
      height: 80px;
      margin-bottom: 16px;
      opacity: 0.5;
    }

    .empty-text {
      font-size: 16px;
      color: #999;
    }
  }

  .bottom-action {
    padding: 16px;
    background: #fff;
    border-top: 1px solid #e8e8e8;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    .print-btn {
      width: 100%;
      height: 48px;
      background: #213165;
      color: #fff;
      border: none;
      border-radius: 24px;
      font-size: 16px;
      font-weight: 600;
      transition: all 0.3s ease;

      &:active {
        transform: scale(0.98);
        background: #1a2a52;
      }

      &:disabled {
        background: #ccc;
        color: #999;
        transform: none;
      }
    }
  }
</style>
